<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Varmilo</title>
  <link rel="stylesheet" href="/css/shopCart.css">
</head>

<body>
  <header class="header"></header>
  <!-- 商品结算部分 -->
  <main>
    <div id="container">

    </div>
    <script type="text/html" id="containerTemplate">
      <div class="shopCart">
        <p>购物车</p>
        {{each cart shop}}
        <div class="product-intro" data-id="{{shop.id}}">
          <input type="checkbox" name="checkbox" class="confirmBuy" {{shop.check?'checked':''}}>
          <a href="/html/detail.html?id={{shop.id}}"><img src="{{shop.photo[0].url}}"></a>
          <span class="pro-title"><a href="/html/detail.html?id={{shop.id}}">{{shop.qunTitle.slice(0,15)}}...</a></span>
          <span class="choiceBox" data-id="">
            <button class="subBtn ">-</button>
            <input type="text" value="{{shop.count}}" class="form-control" style="text-align:center;">
            <button class="addBtn ">+</button>
          </span>
          <span class="pro-price">¥<em>{{shop.originPrice}}</em></span>
          <span class="price">¥<em>{{(shop.originPrice*shop.count).toFixed(2)}}</em></span>
            <!-- <img src="/images/shopCart/trash.jpg" class="trash"> -->
            <p class="trash">X</p>
        </div>
        {{/each}}
      </div>
      <div class="total-price">
        <input type="checkbox" name="checkbox" id="allSelect">
        <p class="total-text">全选</p>
        <p class="total-number">合计:¥<b>0.00</b></p>
        <button class="settlement form-control">结算</button>
      </div>
    </script>
    <!-- 购物车没有数据显示的样式 -->
    <div class="empty-frame" id="cartEmpty">
      <img src="/images/shopCart/kong_gouwuche.png">
      <b>购物车空空如也~🙅🏻‍♀️🙅🏻🍤🐷❤️</b>
    </div>
  </main>
  <footer></footer>
  <!-- 头尾复用 -->
  <script src="/libs/require/require.min.js" data-main="/js/shopCart"></script>
</body>

</html>